import { useState, useRef } from 'react';
import { Carousel } from 'antd';
import './../../css/selected.scss'
import { LeftOutlined, RightOutlined } from '@ant-design/icons';

function SelectedCarousel() {
    const [hover, setHover] = useState(false)
    const onMouseEnter = () => {
        setHover(true)
    }
    const onMouseLeave = () => {
        setHover(false)
    }
    const carousels: any = useRef(null)
    const leftHover = () => {
        console.log('carousels', carousels.current);
        carousels.current.prev()
    }
    const rightHover = () => {
        carousels.current.next()
    }
    const CarouselImages = [
        '/public/carousel1.webp',
        '/public/carousel2.webp',
        '/public/carousel3.webp',
        '/public/carousel4.webp',
    ]
    return (
        <div
            onMouseEnter={onMouseEnter}
            onMouseLeave={onMouseLeave}
            className='CarouselBox'>
            <Carousel autoplay ref={carousels}>
                {
                    CarouselImages.map((image, index) => (
                        <img src={image} key={index} className='CarouselBoxImg' />
                    ))
                }
            </Carousel>
            {
                hover ?
                    <>
                        <div onClick={leftHover} className='left_hover' > <LeftOutlined /> </div>
                        <div onClick={rightHover} className='right_hover'> <RightOutlined /> </div>
                    </>
                    : ''
            }
        </div>
    );
}

export default SelectedCarousel;